<template >
  <el-table
      :data="tableData"
      border
      style=" width: 701px">
    <el-table-column
        fixed
        prop="id"
        label="ID"
        width="100">
    </el-table-column>
    <el-table-column
        prop="bookname"
        label="书名"
        width="300">
    </el-table-column>
    <el-table-column
        prop="author"
        label="作者"
        width="200">
    </el-table-column>

    <el-table-column
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="bookupdate(scope.row)" type="text" size="small">修改</el-button>
        <el-button @click="bookdel(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    bookupdate(row) {
      this.$router.push('edit?id='+row.id)
    },
    bookdel(row) {
      let _this = this
      this.$confirm('是否确定要删除'+row.bookname+'？', '删除数据', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete('http://localhost:8888/books/delete/'+row.id).then(function (response) {
          if(response.data){
            _this.$alert(row.bookname+'删除成功！', '删除数据', {
              confirmButtonText: '确定',
              callback: action => {
                //跳转到/table
                location.reload()
              }
            });
          }
        })
      }).catch(() => {
      });
    }
  },
  created() {
    const  _this=this
    axios.get("http://localhost:8888/books/list").then(function (response){
      _this.tableData=response.data
    })
  },

  data() {
    return {
      tableData: null
    }
  }
}
</script>